<template>
  <div class="invoiceManageFilter">
    <el-form ref="form" :inline="true" :model="formInline" class="form-inline" label-width="80px"
      @submit.native.prevent>
      <el-form-item label="批次号">
        <el-input v-model="formInline.batch_number" placeholder="输入批次号"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="选择状态">
          <el-option label="全部" value="0"></el-option>
          <el-option label="申请中" value="1"></el-option>
          <el-option label="已开票" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btnItem">
        <el-button type="primary" @click="onSubmit" native-type="submit">查询</el-button>
        <el-button class="btn" @click="resetTable">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "invoiceManageFilter",
  data() {
    return {
      formInline: {
        batch_number: "", //批次号
        status:'',
      }
    };
  },
  mounted() { },
  methods: {
    resetTable() {
      this.$emit("filterTable", false);
      this.formInline = {
        batch_number: "", //批次号
        status:''
      };
    },
    onSubmit() {
      let ableFilter = false;
      for (let key in this.formInline) {
        let value = this.formInline[key];
        if (value) {
          ableFilter = true;
          break;
        }
      }
      if (ableFilter) {
        this.$emit("filterTable", {
          ...this.formInline
        });
      }else{
        this.$emit("filterTable",false)
      }
    }
  }
};
</script>

<style lang="scss">
.invoiceManageFilter {
  .form-inline {
    display: flex;
    flex-wrap: wrap;

    .btnItem {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .el-form-item__content {
        width: auto !important;
      }

      .btn {
        margin-right: 22px;
      }
    }

    .el-form-item__label {
      // min-width: 80%;
      overflow: hidden;
      white-space: nowrap;
    }

    .el-date-editor--daterange {
      width: 100%;

      .el-range-separator {
        width: 10% !important;
      }
    }

    .el-input,
    .el-select {
      width: 100%;
    }

    .el-form-item {
      display: flex;
      width: 20%;
      margin-right: 0;

      .el-form-item__content {
        width: 70%;
      }
    }
  }
}
</style>